<template>
  <div>
    <!-- 粘贴上传图片的区域 -->
    <div class="paste-area" @paste="handlePaste">
      点击这里并粘贴图片
      <div v-if="imageUrl">
        <img :src="imageUrl" alt="粘贴的图片">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pasteuploadimage',
  data() {
    return {
      uploadUrl: '/upload-image', // 后端上传图片的接口地址
      imageUrl: null
    }
  },
  methods: {
    readFileAsBase64(file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        this.imageUrl = e.target.result
      }
      reader.readAsDataURL(file)
    },
    handlePaste(event) {
      const items = (event.clipboardData || event.originalEvent.clipboardData).items
      for (const item of items) {
        if (item.type.indexOf('image') === 0) {
          const file = item.getAsFile()
          this.readFileAsBase64(file)
          // this.imageUrl = URL.createObjectURL(file);
          // this.uploadImage(file);
        }
      }
    },
    uploadImage(file) {
      const formData = new FormData()
      formData.append('image', file)

      // 使用 axios 或其他 AJAX 库上传图片
      // axios.post('your-upload-url', formData)
      //   .then(response => {
      //     console.log('图片上传成功', response);
      //   })
      //   .catch(error => {
      //     console.error('上传出错', error);
      //   });
    },
    handleSuccess(response) {
      // 图片上传成功后的处理
      if (response && response.code === 200) {
        // 图片上传成功，可以进行其他操作，例如显示图片或保存图片链接
        console.log('图片上传成功，图片链接：', response.data.url)
      } else {
        // 图片上传失败，处理失败情况
        console.error('图片上传失败')
      }
    }
  }}
</script>
<style>
.paste-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
</style>
<style>
.upload-demo {
  width: 150px;
  height: 150px;
  border: 1px dashed #ccc;
  text-align: center;
  line-height: 150px;
}
</style>
